<template>
	<view>
		<u-navbar :custom-back="customBack" title="订单列表" :border-bottom="false"></u-navbar>
		<u-sticky :enable="enable">
			<!-- 只能有一个根元素 -->
			<view class="top-box">
				<u-tabs :list="list" bar-width="60" :is-scroll="true" active-color="#f0ad4e" :current="current"
					@change="change"></u-tabs>
			</view>
		</u-sticky>
		<!-- 此处分开写，为了让数据互不影响 -->
		<template v-if="orderList.length == 0">
			<view class="flex justify-center items-center mt-80" style="height: 55vh;">
				<view class="flex justify-center items-center flex-wrap">
					<fui-lottie :options="options"></fui-lottie>
					<uni-load-more :status="status" :load-text="loadText"></uni-load-more>
				</view>
			</view>
		</template>
		<template v-else>
			<order-list :list="orderList" :current="current"></order-list>
			<uni-load-more :status="status" :load-text="loadText"></uni-load-more>
		</template>
	</view>
</template>

<script>
	import emptyJson from '@/static/json/empty.json'
	import orderList from './components/order-list.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待支付'
				}, {
					name: '待完成'
				}, {
					name: '待评价'
				}, {
					name: '退款/售后'
				}],
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多订单啦～'
				},
				current: 0,
				page: 0,
				loading: false,
				loadMore: true,
				orderList: [], // 订单列表数据
				options: {
					animationData: emptyJson
				},
				enable: true
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
			status() {
				if (this.loadMore == false) {
					return "noMore";
				} else if (this.loading) {
					return "loading";
				} else {
					return "more";
				}
			}
		},
		components: {
			orderList
		},
		onLoad(e) {
			if(e.state) this.current = e.state;
		},
		onShow() {
			this.enable = true
			console.log('调用了onshow');
			if (!this.hasLogin) {
				this.$ut.emptyToken();
			} else {
				this.initData();
			}
		},
		methods: {
			initData() {
				this.getOrderTakeawayToUser();
			},
			// 跳转到个人中心去
			customBack(){
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			// 重制数据
			reset() {
				this.page = 0;
				this.loading = false;
				this.loadMore = true;
				this.orderList = [];
			},
			// 获取订单信息
			getOrderTakeawayToUser() {
				if (this.loading || !this.loadMore) {
					return false;
				} else {
					this.loading = true;
					this.page += 1;
					this.$u.api.getOrderTakeawayToUser({
							page: this.page,
							limit: 10,
							wholeUserState: this.current === 0 ? null : this.current - 1
						}).then(res => {
							const {
								dataList,
								total
							} = res;
							this.orderList = this.orderList.concat(dataList);
							if (total <= this.orderList.length) this.loadMore = false;
							this.loading = false;
						})
						.catch(() => {
							this.loading = false;
							this.page -= 1;
						}).finally(() => {
							uni.stopPullDownRefresh();
						});
				}
			},
			async change(index) {
				this.current = index;
				await this.reset();
				this.getOrderTakeawayToUser();
			},
		},
		// 下拉刷新
		async onPullDownRefresh() {
			await this.reset();
			this.getOrderTakeawayToUser();
		},
		// 上拉加载
		onReachBottom() {
			this.getOrderTakeawayToUser();
		},
		onHide() {
			this.enable = false
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		box-shadow: 0 16rpx 10rpx rgba($color: #333, $alpha: .02);
	}

	::v-deep {
		.u-badge--bg--error {
			background-color: transparent;
			border: 1rpx solid #fa3534;
			color: #fa3534 !important;
		}

		.u-tab-item {
			color: #333 !important;
		}
	}
</style>